<nz-modal
  nzWidth="1200px"
  [(nzVisible)]="isFansVisible"
  nzTitle="粉丝"
  nzClassName="fans-modal"
  [nzFooter]="null"
  (nzOnCancel)="isFansVisible = false"
  (nzAfterOpen)="loadFansTable()">
  <ng-container *nzModalContent>
    <nz-table
      #fansTable
      nzSize="small"
      nzBordered
      [nzLoading]="fansTableParams.tableLoading"
      [nzData]="fansTableData"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="fansTableParams.total"
      [nzPageIndex]="fansTableParams.page"
      [nzPageSize]="fansTableParams.pageSize"
      [nzShowTotal]="fansTotalTemplate"
      (nzPageIndexChange)="fansPageIndexChange($event)"
      (nzPageSizeChange)="fansPageSizeChange($event)">
      <thead>
        <tr>
          <th nzAlign="center">粉丝ID</th>
          <th nzAlign="center">粉丝昵称</th>
          <th nzAlign="center">粉丝手机号码</th>
          <th nzAlign="center">最近登录时间</th>
          <th nzAlign="center">注册时间</th>
          <th nzAlign="center">累计贡献</th>
          <th nzAlign="center">今日贡献</th>
          <th nzAlign="center">本月贡献</th>
          <th nzAlign="center">上月贡献</th>
          <th nzAlign="center">定制手机壳贡献</th>
          <th nzAlign="center">发/买手机壳贡献</th>
          <th nzAlign="center">定制手机壳</th>
          <th nzAlign="center">发/买手机壳</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of fansTable.data">
          <!-- 粉丝ID -->
          <td nzAlign="center">{{ data.userId }}</td>
          <!-- 粉丝昵称 -->
          <td nzAlign="center">{{ data.nickname || '-' }}</td>
          <!-- 粉丝手机号码 -->
          <td nzAlign="center">{{ data.phone || '-' }}</td>
          <!-- 最近登录时间 -->
          <td nzAlign="center">{{ data.lastLoginTime || '-' }}</td>
          <!-- 注册时间 -->
          <td nzAlign="center">{{ data.regTime || '-' }}</td>
          <!-- 累计贡献 -->
          <td nzAlign="center">{{ data.total || '0' }}</td>
          <!-- 今日贡献 -->
          <td nzAlign="center">{{ data.today || '0' }}</td>
          <!-- 本月贡献 -->
          <td nzAlign="center">{{ data.thisMonth || '0' }}</td>
          <!-- 上月贡献 -->
          <td nzAlign="center">{{ data.lastMonth || '0' }}</td>
          <!-- 定制手机壳贡献 -->
          <td nzAlign="center">{{ data.custom || '0' }}</td>
          <!-- 发/买手机壳贡献 -->
          <td nzAlign="center">{{ data.redPacket || '0' }}</td>
          <!-- 定制手机壳 -->
          <td nzAlign="center">{{ data.customCount || '0' }} 单</td>
          <!-- 发/买手机壳 -->
          <td nzAlign="center">{{ data.redPacketCount || '0' }} 次</td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #fansTotalTemplate let-total>共有 {{ fansTableParams.total }} 条</ng-template>
  </ng-container>
</nz-modal>